<template>
  <div>
    <div class="backFirst">
      <img src="../../../assets/credit.png">
    </div>
    <el-button type="success" @click="applyTheCredit">信用卡申请</el-button>

    <el-dialog v-model="dialogVisible" title="填写申请信息">
      <span>
        <el-form :model="airuiUser">
          <el-form-item
            label="姓名"
            prop="realName"
            :rules="[
              { required: true, message: '请输入真实姓名', trigger: 'blur' },
              {
                pattern: /^[\u4e00-\u9fa5]+$/,
                message: '请输入中文',
                trigger: 'blur',
              },
            ]"
          >
            <el-input
              v-model="airuiUser.realName"
              placeholder="请输入真实姓名"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="身份证号"
            prop="iden"
            :rules="[
              { required: true, message: '请输入身份证号', trigger: 'blur' },
            ]"
          >
            <el-input
              v-model="airuiUser.iden"
              placeholder="请输入身份证号码"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="手机号"
            prop="mobile"
            :rules="[
              { required: true, message: '请输入手机号', trigger: 'blur' },
            ]"
          >
            <el-input
              v-model="airuiUser.mobile"
              placeholder="请输入手机号"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="验证码"
            prop="code"
            :rules="[
              { required: true, message: '请输入验证码', trigger: 'blur' },
            ]"
          >
            <el-input
              v-model="airuiUser.code"
              placeholder="请输入验证码"
              style="width: 300px"
            ></el-input>
            <el-button
              :disabled="disCount != 0"
              type="primary"
              @click="refreshSendCode()"
            >
              {{ textName }}
            </el-button>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitTheMsg">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { RefreshTheCreditCode, SubmitTheMsg } from '@/api/creditCard'
import router from '@/router'

//ref可以及时回显最新的值
const dialogVisible = ref(false)
const textName = ref('发送验证码')
const disCount = ref(0)
const airuiUser = ref({
  realName: '',
  iden: '',
  mobile: '',
  code: '',
})
const count = ref(0)

//发送验证码，以及重新发送验证码

function refreshSendCode() {
  if (airuiUser.value.mobile === undefined || airuiUser.value.mobile === '') {
    ElMessage.error('请输入手机号')
  } else {
    count.value++
    RefreshTheCreditCode().then(({ code, message }) => {
      let n = 60
      textName.value = n + '秒钟重新获取'
      if (code === 200) {
        ElMessage.success(message)
      } else {
        ElMessage.error('发送失败请稍后重试！')
      }
      const timer = setInterval(() => {
        if (n === 0) {
          disCount.value = 0
          clearInterval(timer)
          textName.value = '获取验证码'
        } else {
          disCount.value = 1
          n--
          textName.value = n + '秒钟重新获取'
        }
      }, 1000)
    })
  }
}

function submitTheMsg() {
  console.log(airuiUser.value)
  SubmitTheMsg(airuiUser.value).then(({ code, message }) => {
    if (code == 200) {
      ElMessage.success(message)
      //申请成功关闭该dialog
      dialogVisible.value = false
      //跳转到审核进度页面
      router.push('/examineCredit')
    } else {
      ElMessage.error(message)
    }
  })
}

//打开对话框前的准备操作
function applyTheCredit() {
  count.value = 0
  dialogVisible.value = true
  airuiUser.value = { realName: '', iden: '', mobile: '', code: '' }
}
</script>

<style scoped>
.backFirst{
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>
